<div ng-init="$ctrl.init()">
    <div ng-if="$ctrl.template" class="card mb-4">

        <h6 class="card-header">{{$ctrl.folderType}} Template Viewer
            <a class="btn-link text-primary btn-sm float-right py-0" data-toggle="collapse"
                data-target="#quick-{{$ctrl.folderType}}-layout-editor" role="button" aria-expanded="false"
                aria-controls="quick-{{$ctrl.folderType}}-layout-editor">
                <span class="far fa-minus-square text-primary"></span> Show/Hide</a>
            <a href="/portal/template/details/{{$ctrl.template.themeId}}/{{$ctrl.template.folderType}}/{{$ctrl.template.id}}"
                class="btn btn-link text-primary btn-sm float-right py-0">
                <span class="fas fa-pen text-primary"></span> Edit {{$ctrl.folderType}} Template
            </a>
        </h6>
        <div id="quick-{{$ctrl.folderType}}-layout-editor" class="card-body collapse">
            <div class="form-group">
                <div class="input-group mb-3">
                    <select class="btn btn-outline-secondary custom-select col-sm-4"
                        ng-options="item as item.fileName for item in $ctrl.templates track by item.id"
                        ng-model="$ctrl.template" ng-change="$ctrl.selectTemplate($ctrl.template)"></select>
                    <input class="form-control sel-filename" ng-change="$ctrl.new()" type="text"
                        ng-model="$ctrl.template.fileName" value="{{$ctrl.template.fileName}}"
                        placeholder="Input template name here...">
                    <input class="template-id" type="hidden" ng-model="$ctrl.template.id" value="{{$ctrl.template.id}}">
                </div>
            </div>
            <tabs-v select-callback="$ctrl.selectPane(pane)">
                <pane-v header="Razor Template">
                    <monaco-editor content-id="$ctrl.template.id" line-count="$ctrl.lineCount"
                        is-readonly="$ctrl.isReadonly" is-visible="$ctrl.activedPane.header == 'Razor Template'"
                        content="$ctrl.template.content">
                    </monaco-editor>
                </pane-v>
                <pane-v header="Scripts" ng-if="$ctrl.hideJs != 'true'">
                    <monaco-editor content-id="$ctrl.template.id" line-count="$ctrl.lineCount"
                        is-readonly="$ctrl.isReadonly" is-visible="$ctrl.activedPane.header == 'Scripts'"
                        content="$ctrl.template.scripts" default-content="'<script>\n\n</script>'"></monaco-editor>
                </pane-v>
                <pane-v header="Styles" ng-if="!$ctrl.hideCss != 'true'">
                    <monaco-editor content-id="$ctrl.template.id" line-count="$ctrl.lineCount"
                        is-readonly="$ctrl.isReadonly" is-visible="$ctrl.activedPane.header == 'Styles'"
                        content="$ctrl.template.styles" default-content="'<style>\n\n</style>'">
                    </monaco-editor>
                </pane-v>

            </tabs-v>
        </div>

    </div>
</div>